<!-- 其他入库作业：蹇泽阳 -->
<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />
    <Find :OriginalFilter="{ static: true }" :formList="formList2" :searchImg="false" @findClicked="findClicked2" />
    <div class="mt10" style="width: 100%; background-color: white">
      <el-card shadow="never" class="table1" :body-style="{ padding: '5px 10px 5px' }">
        <div slot="header" class="f16">
          <span style="font-weight: 600">选择</span>
        </div>
        <Table
          :tableHeader="tableHeader"
          :tableData="tableData"
          class="mt10"
          :isLoading="isLoading"
          :TableHeight="50"
          :outTableHeight="110"
          @currentRow="currentRow"
          @selectListShow="selectListShow"
        />
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
        <div slot="header" class="f16">
          <span style="font-weight: 600">材料其他入库明细</span>
        </div>
        <Table
          :tableHeader="tableHeader2"
          :tableData="tableData2"
          :isLoading="isLoading2"
          :TableHeight="50"
          :outTableHeight="110"
          @currentRow="currentRow2"
        />
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '5px' }">
        <PageModule :PageData="{ total: total2, buttonS: true }" @pageSizeChange="handleSizeChange2" @pageChange="handleCurrentChange2" />
      </el-card>
    </div>

    <!-- 订单屏蔽 -->
    <el-drawer v-model="dialogTableVisible" :direction="'ttb'" size="small" :with-header="false">
      <div class="flex mt30 ml45">
        <el-tree :data="data" node-key="所有数据" :props="defaultProps" @node-click="handleNodeClick" />
        <div class="ml45">
          <Find :OriginalFilter="{ static: true }" :formList="formList3" @findClicked="findClicked3" />
          <el-card shadow="never" :body-style="{ padding: '15px 10px 5px' }">
            <div slot="header" class="f16">
              <span style="font-weight: 600">材料查询</span>
            </div>
            <Table :tableHeader="tableHeader3" :tableData="tableData3" selection class="mt10" :isLoading="isLoading3" @selectList="selectList3" />
          </el-card>
          <el-card shadow="never" :body-style="{ padding: '5px' }">
            <PageModule :PageData="{ total: total3, buttonS: true }" @pageSizeChange="handleSizeChange3" @pageChange="handleCurrentChange3" />
          </el-card>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script lang="ts">
import { defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'OtherWarehousing'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import Find from '@/components/Find/index.vue'
import LoginWork from '@/utils/LoginWork'
import service from '@/utils/request'
import { ElMessage } from 'element-plus'
import { debounce } from 'lodash'
const dialogTableVisible = ref(false)
const data = ref<any>([])
const defaultProps = {
  children: 'children',
  label: 'typeName'
}
interface Tree {
  children?: Tree[]
  levelCode: string
  oldLevel: string
  parentLevel: string
  typeName: string
  typeNo: string
}
// 分类名称
const DepartmentName = ref<string>('')
// 判断下拉框是否禁用
const disabledDepartment = ref(true)
const handleNodeClick = async (data: Tree) => {
  let { typeName, typeNo, levelCode, parentLevel } = data
  if (parentLevel !== null && parentLevel.length === 2) {
    disabledDepartment.value = false
  } else {
    disabledDepartment.value = true
  }
  DepartmentName.value = typeName
}
//获取所有部门资料
onMounted(() => {
  DepartmentalData()
})
const DepartmentalData = async () => {
  let resolve = await service.get('/MaterialManagement/getAssortList')
  data.value = resolve
}

const formList = ref([
  {
    type: 'button',
    checkboxLabel: '选择材料 >>'
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '入库原因',
    selectLabel: '',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: '盘盈调整',
        optionLabel: '盘盈调整'
      },
      {
        optionKey: '2',
        optionValue: '厂商赠送',
        optionLabel: '厂商赠送'
      }
    ]
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '仓库',
    selectLabel: '',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: '在制仓',
        optionLabel: '在制仓'
      },
      {
        optionKey: '2',
        optionValue: '剩料仓',
        optionLabel: '剩料仓'
      }
    ]
  },
  {
    type: 'button',
    checkboxLabel: '生成其他入库单据'
  }
])
const formList2 = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入材料',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入颜色',
    inputValue: ''
  },
  {
    type: 'date',
    dateLabel: '入库日期',
    dateValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '入库原因',
    selectLabel: '',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: '盘盈调整',
        optionLabel: '盘盈调整'
      },
      {
        optionKey: '2',
        optionValue: '厂商赠送',
        optionLabel: '厂商赠送'
      }
    ]
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  // 打印出来是空的
  // {
  //   type: 'button',
  //   checkboxLabel: '打印材料标签',
  // },
  {
    type: 'button',
    checkboxLabel: '删除入库材料'
  }
])
const formList3 = ref([
  {
    type: 'input',
    inputPlaceholder: '',
    inputDisabled: true,
    inputValue: DepartmentName
  },
  {
    type: 'input',
    inputPlaceholder: '请输入名称1',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入名称2',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入名称3',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入颜色',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入规格',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入单位',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '返回'
  },
  {
    type: 'button',
    checkboxLabel: '插入'
  }
])
const tableHeader = ref([
  {
    label: '分类名称',
    prop: 'typeName'
  },
  {
    label: '物料编码',
    prop: 'mtlNo',
    width: '180px'
  },
  {
    label: '材料颜色',
    prop: 'mtlColor',
    width: '127px'
  },
  {
    label: '材料名称',
    prop: 'mtlName',
    width: '350px'
  },
  {
    label: '规格',
    prop: 'mtlSpec',
    width: '58px'
  },
  {
    label: '单位',
    prop: 'mtlUnit',
    width: '108px'
  },
  {
    label: '入库数量',
    prop: 'qty',
    width: '108px'
  },
  {
    label: '库存位置',
    type: 'select',
    prop: 'areaNo',
    width: '140px'
  },
  {
    label: '位置序号',
    prop: 'seqNo',
    width: '90px'
  },
  {
    label: '备注',
    prop: 'shape',
    width: '300px'
  }
])

const tableHeader2 = ref([
  {
    label: '入库单号',
    prop: 'slipNo',
    width: '115px'
  },
  {
    label: '入库日期',
    prop: 'slipDate',
    width: '107px'
  },
  {
    label: '入库原因',
    prop: 'slipReason'
  },
  {
    label: '料号',
    prop: 'mtlNo',
    width: '237px'
  },
  {
    label: '材质',
    prop: 'mtlName',
    width: '237px'
  },
  {
    label: '颜色',
    prop: 'mtlColor',
    width: '70px'
  },
  {
    label: '规格',
    prop: 'mtlSpec',
    width: '70px'
  },
  {
    label: '单位',
    prop: 'mtlUnit',
    width: '70px'
  },
  {
    label: '入库数量',
    prop: 'qty',
    width: '70px'
  },
  {
    label: '仓库',
    prop: 'warehouseNo',
    width: '70px'
  },
  {
    label: '库存位置',
    prop: 'areaNo',
    width: '120px'
  },
  {
    label: '位置序号',
    prop: 'seqNo',
    width: '70px'
  },
  {
    label: '备注',
    prop: 'remark',
    width: '230px'
  }
])
const tableHeader3 = ref([
  {
    label: '物料编码',
    prop: 'mtlNo'
  },
  {
    label: '颜色',
    prop: 'mtlColor'
  },
  {
    label: '材料名称',
    prop: 'mtlName',
    width: 400
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    label: '单位',
    prop: 'mtlUnit'
  }
])
// 表一模块
// 表一按钮
const findClicked = async (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '选择材料 >>') {
    dialogTableVisible.value = true
  }
  if (content === '生成其他入库单据') {
    if (!table1CurrentRow.value) return JMessage.warning('请选择要入库的材料')
    table1CurrentRow.value[0].areaNo = table1CurrentRow.value[0].areaNo.selectValue
    const res = await LoginWork.post<any, any>('/stock/other/cOtherDetailList', {
      list: table1CurrentRow.value,
      slipReason: formList.value[1].selectValue,
      warehouseNo: formList.value[2].selectValue
    })
    if (res.code === 200) {
      JMessage.success('生成其他入库单据成功')
      getTableList()
      getTableList2()
    } else {
      JMessage.warning(res.message)
    }
  }
}
const tableData = ref<any>([])
const isLoading = ref(true)
const table1CurrentRow = ref()
const currentRow = (row: any = tableData.value[0]) => {
  table1CurrentRow.value = [{ ...row }]
}
// 获取表数据
const getTableList = debounce(async () => {
  isLoading.value = true
  tableData.value = await service.get<any, any>('/stock/other/mtlOtherList')
  isLoading.value = false
  // console.log(tableDataList.list);
  tableData.value = tableData.value.list.map((item: any) => {
    item.change = 'Y'
    // 修改表格中下拉框数据（获取表格数据函数）
    item.areaNo = {
      selectValue: item.areaNo || ' ',
      options: []
    }
    item.disableConfirm = true
    // getSelectList4(item)
    return item
  })
  currentRow()
}, 500)
onMounted(() => {
  getTableList()
})
// 获取表格中下拉框数据
// 获取库存位置下拉框数据
const selectListShow = async (row: any, visible: boolean) => {
  if (visible === true) {
    const res = await service.post<any, any>('/stock/wareHouseList', {
      areaNo: '',
      areaType: '',
      remark: '',
      stkNo: '',
      warehouseNo: ''
    })
    res.forEach((Vendor: any) => {
      Vendor.remark === null ? (Vendor.remark = '') : Vendor.remark
      row.areaNo.options.push({
        label: Vendor.areaNo,
        value: Vendor.areaNo, //中间空两个
        LeftLabel: `${Vendor.areaNo}`,
        RightLabel: `${Vendor.remark}`
      })
    })
  } else {
    row.areaNo.options = []
  }
}

// 表二模块
// 表二按钮
const findClicked2 = async (content: string) => {
  if (content === '置空') {
    formList2.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '打印材料标签') {
  }
  if (content === '删除入库材料') {
    try {
      await service.post('/stock/other/dOtherDetail', table2currentRow.value)
      JMessage.success('删除成功')
      getTableList2()
    } catch (error) {
      JMessage.warning('删除失败')
    }
  }
}
const tableData2 = ref([])
const isLoading2 = ref(true)
// 分页器
const currentPage2 = ref(1)
const pageSize2 = ref(40)
const total2 = ref(0)
const handleSizeChange2 = (val: number) => {
  pageSize2.value = val
  getTableList2()
}
const handleCurrentChange2 = (val: number) => {
  currentPage2.value = val
  getTableList2()
}
// 获取表数据
const getTableList2 = debounce(async () => {
  isLoading2.value = true
  let tableDataList = await service.post<any, any>('/stock/other/mtlDetailList', {
    mtlColor: formList2.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入颜色'
    )?.inputValue,
    mtlName: formList2.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入材料'
    )?.inputValue,
    slipEndDate: formList2.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '入库日期'
    )?.dateValue?.[1],
    slipReason: formList2.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '入库原因')
      ?.selectValue,
    slipStartDate: formList2.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '入库日期'
    )?.dateValue?.[0],
    pageNum: currentPage2.value,
    pageSize: pageSize2.value
  })
  isLoading2.value = false
  tableData2.value = tableDataList.list
  total2.value = tableDataList.total
  currentRow2()
}, 500)
onMounted(() => {
  getTableList2()
})
watch(formList2.value, () => {
  getTableList2()
})
const table2currentRow = ref()
const currentRow2 = async (row: any = tableData2.value[0]) => {
  table2currentRow.value = row
}

// 表三模块
// 选择表格数据
const selectTable3List = ref([])
const selectList3 = (list: any) => {
  selectTable3List.value = JSON.parse(JSON.stringify(list))
}
// 表三按钮
const findClicked3 = async (content: string) => {
  if (content === '返回') {
    dialogTableVisible.value = false
  }
  if (content === '插入') {
    if (selectTable3List.value.length === 0) {
      JMessage.warning('请打勾材料')
      return
    }
    let res = await LoginWork.post<any, any>('/stock/other/insertMtlInList', selectTable3List.value)
    if (res.code === 200) {
      JMessage.success('插入成功')
    } else {
      JMessage.warning(res.message)
    }
    dialogTableVisible.value = false
    getTableList()
  }
}
const tableData3 = ref([])
const isLoading3 = ref(true)
// 分页器
const currentPage3 = ref(1)
const pageSize3 = ref(40)
const total3 = ref(0)
const handleSizeChange3 = (val: number) => {
  pageSize3.value = val
  getTableList3()
}
const handleCurrentChange3 = (val: number) => {
  currentPage3.value = val
  getTableList3()
}
// 获取表数据
const getTableList3 = debounce(async () => {
  isLoading3.value = true
  let tableDataList = await service.post<any, any>('/stock/other/chooseMtlInList', {
    choose: '',
    mtlColor: formList3.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入颜色'
    )?.inputValue,
    mtlName1: formList3.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入名称1'
    )?.inputValue,
    mtlName2: formList3.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入名称2'
    )?.inputValue,
    mtlName3: formList3.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入名称3'
    )?.inputValue,
    mtlSpec: formList3.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入规格'
    )?.inputValue,
    mtlUnit: formList3.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入单位'
    )?.inputValue,
    type: DepartmentName.value,
    pageNum: currentPage3.value,
    pageSize: pageSize3.value
  })

  isLoading3.value = false
  tableData3.value = tableDataList.list
  total3.value = tableDataList.total
}, 500)
onMounted(() => {
  getTableList3()
})
watch(formList3.value, () => {
  getTableList3()
})

onBeforeUnmount(async () => {
  await service.post('/stock/other/deleteByTemp')
})
</script>

<style lang="less" scoped>
:deep(.el-tree-node:focus > .el-tree-node__content) {
  color: #f89027;
}

:deep(.el-tree-node__content:hover) {
  color: #f89027;
}

:deep(.is-expanded > .el-tree-node__content > .el-tree-node__expand-icon) {
  color: red !important;
}

.table1 {
  :deep(th:nth-child(8)) {
    color: red !important;
  }

  :deep(th:nth-child(9)) {
    color: red !important;
  }

  :deep(th:nth-child(7)) {
    color: red !important;
  }
}
</style>
